<template>
	<view class='newCar-page'>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">
				<text class="nav-title nav-title-selected" >新能源车</text>
			</block>
		</cu-custom>
		<addressSearchFixed ref="setAddres" @inputPhone="kongInput" @searchBtn='event_clickSearchBtn' :isShowAddress="false"></addressSearchFixed>
        <view class='newEnergy-backgourd' :style="[{marginTop: SeachBar + 'px'}]"></view>
		<view class="newCar-page__content" v-for="(item,index) in VehicleSeries" :key='item.id'>
			 <view class='newEnergy-title'> 
				 {{item.name}}
			 </view>
			 <view class="newEnergy-content">
			 	<view class='newEnergy-content-title'>
					 <view class='newEnergy-content-box' @click='detailVehicleSeries(it)' v-for="(it,i) in item.children" :key='it.id'>
						 <view class='newEnergy-content-left'>{{it.name}}</view>
						 <view class='newEnergy-content-right'>{{it.num == undefined ? 0 : it.num}}条<text class='icon-right'>></text></view>
					 </view>
					
					<!-- <view class="newEnergy-content-line">
						
					</view> -->
				</view>
			 </view>
		</view>
		<!-- 右侧字母导航条 -->
		<view class="newCar-indexed-list__menu" :style="[{marginTop: SeachBar + 'px'}]">
			<view class='newEngry-top' v-for="(carBrandInfo, i) in carBrandInfoList" :key="i" @click="toSelectIndex(carBrandInfo.key, i)">
				{{carBrandInfo.key}}
			</view>
		</view>
		
		
	</view>
</template>

<script>
    import cuCustom from "@/components/custom-nav/cu-custom.vue";
	import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";
	import { getEnergyVehicleSeries } from "@/api/newEnergy.js"
	import { getNewCarBrandList } from '@/api/brand.js';
	export default {
		components: {
			cuCustom,
			addressSearchFixed
		},
		 data() {
			  return {
				   SeachBar: this.SeachBar,
				   VehicleSeries:[],
				   carBrandInfoList:[],
				   SearchVal:''
			  }
		 },
		 onLoad() {
			 this.getEnergyVehicleSeries()
		 },
		 onShow() {
		 	this.init();
		 	try{
		 		this.$utils.stopPage(); //禁止页面本身的滑动
		 		this.$refs.setAddres.setAddres()
		 	}catch(e){
		 		//TODO handle the exception
		 	}
		 	
		 },

		 onHide() {
		 	this.$utils.movePage()
		 },
		 onUnload() {
		 	this.$utils.movePage()
		 },
		 methods:{
			// 搜索如果为空重置接口
			kongInput() {
				setTimeout(() => {
					this.SearchVal = ''
					this.getEnergyVehicleSeries()
				},500)
			},
			// 搜索
			event_clickSearchBtn(value) {
             console.log(value, '输入框的值');
			 this.SearchVal = value
			 this.getEnergyVehicleSeries()
		   },
			 init() {
				 this.getNewCarBrandListApi()
			 },
			 detailVehicleSeries(item){
				 console.log(item, '7-7-7-7-7-');
				uni.navigateTo({
					url: `/newEnergy/newDrtailVehicle/newDrtailVehicle?series_two_id=${item.id}&name=${item.name}`
				})
			 },
			 getEnergyVehicleSeries() {
				  getEnergyVehicleSeries({
					search:this.SearchVal
				  }).then(res => {
					   this.VehicleSeries = res.data 
				  }).catch(err => {
					  uni.showToat({
						  title:JSON.stringify(err),
						  icon:'none'
					  })
				  })
			 },
			 getNewCarBrandListApi() {

				 getNewCarBrandList().then(res => {
				 	this.carBrandInfoList = res.data.concat([{
						key:'#',
						value:[]
					}])
					console.log(this.carBrandInfoList);
				 	this.$forceUpdate()
				 })
			 }
		 }
	}
</script>

<style lang="scss" scoped>
	.newCar-page{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		.newCar-indexed-list__menu {
			display: flex;
			position: fixed;
			top: 50%;
			right: 10rpx;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(0, -50%);
			height: 844rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size:18rpx;
			.newEngry-top{
				margin-bottom:20rpx;
			}
		}
		.nav-title-selected {
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
		}
			
	   .newEnergy-backgourd{
			background-color: #fff;
			height: 30rpx;
	   }
		.newCar-page__content{
			// height: 100vh;
			/* 父元素设置相对定位 */
			position: relative;
			// background-color: #F7F8FA;
            margin-top:20rpx;
			.newEnergy-title{
				height: 44rpx;
				background: #F7F8FA;
				line-height:44rpx;
				padding-left:20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.newEnergy-content{
				background: #fff;
				
				.newEnergy-content-title{
					padding:0rpx 23rpx; 
					.newEnergy-content-box{
					    height: 100rpx;
						border-bottom:2rpx solid #F9F9F9;
						display: flex;
						justify-content: space-between;
						.newEnergy-content-left{
					
						   line-height:100rpx;
						
						   height: 27rpx;
						   font-size: 28rpx;
						   font-family: PingFang SC;
						   font-weight: 500;
						   color: #000000;
						}
						.newEnergy-content-right{
						
						   line-height:100rpx;
						   .icon-right{
							   width: 13rpx;
							   height: 16rpx;
							   font-size: 30rpx;
							   font-family: PingFang SC;
							   font-weight: 500;
							   color: #666666;
							   padding-left:10rpx;
						   }
						}
					}
					// .newEnergy-content-line{
					// 	height: 1rpx;
					// 	background: #F9F9F9;
					// }
					
				}
				
				
			}
		}
	}


</style>